<!-- 消息 -->
<template>
	<!-- 通知列表 -->
	<scroll-view class="notice-list" scroll-y>
	  <!-- 通知项模板 -->
	  <view 
		  v-for="(item,index) in noticeList" 
		  :key="index"
		  class="notice-item" @click="navigateToDetail(item)">
	    
	    <!-- 文字内容 -->
	    <view class="text-content">
			
	      <view class="notice-header">
	        <text class="notice-title">{{item.title}}</text>
	        <text class="notice-time">{{ item.createTime }}</text>
	      </view>
	      <text class="notice-content">
	        {{item.content}}
	      </text>
	    </view>
	  </view>
	
	</scroll-view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import {messageList} from "@/api/index.js";
import{onLoad } from "@dcloudio/uni-app";

	const noticeList = ref([])
	
	onLoad(() => {
		messageList({
			page:1,
			limit:999,
			userId: uni.getStorageSync('userInfo')?.id
		}).then(res => {
			noticeList.value = res.data;
			console.log("res", res)
		})
	})
	
	function getDate() {
		// 创建一个 Date 对象
		const now = new Date();
		
		// 获取月份（0-11，所以要 +1）
		const month = now.getMonth() + 1;
		
		// 获取日期
		const date = now.getDate();
		
		// 获取小时和分钟
		const hours = now.getHours().toString().padStart(2, '0');
		const minutes = now.getMinutes().toString().padStart(2, '0');
		
		// 格式化输出
		const formattedTime = `${month}-${date} ${hours}:${minutes}`;
		
		return formattedTime;
	}
	
	function navigateToDetail(item) {
		uni.navigateTo({
			url: '/view/user/messageDetail/index?faq=' + encodeURIComponent(JSON.stringify(item))
		});
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	.container {
	  background-color: #f5f5f5;
	}
	
	
	.notice-list {
		// margin-top: 50rpx;
		width: 700rpx;
		padding: 20rpx 30rpx;
		height: calc(100vh - 100rpx);
	}
	
	.notice-item {
	  background-color: #fff;
	  border-radius: 16rpx;
	  padding: 20rpx;
	  margin-bottom: 24rpx;
	  display: flex;
	  align-items: flex-start;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

	  .text-content {
	    flex: 1;
	    min-width: 0;
	  }
	
	  .notice-header {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 16rpx;
	  }
	
	  .notice-title {
	    font-size: 32rpx;
	    color: #333;
	    font-weight: 500;
	    max-width: 70%;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	  }
	
	  .notice-time {
	    font-size: 24rpx;
	    color: #999;
	  }
	
	  .notice-content {
	    font-size: 28rpx;
	    color: #666;
	    line-height: 1.5;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
	  }
	}
</style>